<template>
    <div>
        <ul class="flex-row goods-tab bf">
            <li v-for="(item,index) in tabList" :key="index" :class="{'theme-color':index==tabActive}"
                @click="choiceTab(item.s,index)">{{item.name}}
            </li>
        </ul>
        <better-scroll
            ref="scroll"
            class="scroll-t"
            :refresh="initDataList"
            :onLoading="loadDataList"
            :isCategory="false">
            <div class="list-item plr15" v-for="(item, index) in loadData"
                 style="margin: 0;border-bottom: 1px solid #efefef;"
                 @click="$router.push({name:'goods-detail',query:{id:item.id}})">
                <div class="item-list-main flex-row ptb10">
                    <img :src="item.img" alt="">
                    <div class="flex-1 item-list-intr flex-column">
                        <p class="row1 fs14 ">{{item.name}}</p>
                        <div class="flex-row list-item-abreast">
                            <!--<p class="row1" @click.stop="aaa">颜色：12#川南玛瑙</p>-->
                            <p class="row1">已售{{item.sale_num}}</p>
                            <!--<span>X1</span>-->
                        </div>
                        <!--<s>40.00</s>-->
                        <span class="item-list-price theme-color">¥{{computePrice(item.price)}}    </span>
                    </div>
                </div>
            </div>
        </better-scroll>
    </div>
</template>

<script>

    export default {
        name: "GoodsList",
        data() {
            return {
                tabActive: 0,
                tabList: [{s: 'id', name: '默认',}, {s: 'sale', name: '销量'}, {s: 'price', name: '价格'}],
                dataList: [],
                params: {s: 'id', offset: 0, len: 10}
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                let _query = vm.$route.query
                let _key = Object.keys(_query)[0]
                vm.params[_key] = _query[_key]
                if (from.name !== 'goods-detail') vm.initDataList()

            })
        },
        methods: {
            initParams() {
                this.params.offset = 0
                this.loadData = []
            },
            initDataList() {
                this.initParams()
                this.loadDataList()
            },
            loadDataList() {
                this.pubilcInitDataList('SEARCH_GOODS', this.params)
            },
            choiceTab(s, index) {
                this.tabActive = index
                this.params.s = s
                this.initDataList()
            },

        }
    }
</script>

<style scoped lang="scss">
    .goods-tab {
        justify-content: space-around;
        height: 40px;
        margin-bottom: 2px;
        font-size: 14px;
    }

    .scroll-t {
        top: 92px;
    }
</style>